<template>
  <header>
    <van-icon :name="require('@/assets/img/zuojiantou.webp')" size="14" @click="change" />
    <img src="@/assets/img/train.webp" alt="" class="headerimg" />
  </header>

  <main>
    <nav>
      <div class="leftnav">
        已开课<span> {{ 0 }} </span>节
      </div>
      <div class="rightnav">课程有效期：2103-07-01</div>
    </nav>
    <van-list
      v-model:loading="state.loading"
      :finished="state.finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset="4"
    >
      <div class="content" v-for="item of course" :key="item._id">
        <div class="contentLeft">
          <img :src="item.images" alt="" />
        </div>
        <div class="contentRight">
          <h5>{{ item.title }}</h5>
          <p class="subtitle">{{ item.subtitle }}</p>
          <p>{{ item.haveClass ? "未上课" : "已上课" }}</p>
        </div>
      </div>
    </van-list>
  </main>
</template>

<script>
import { computed, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default {
  setup() {
    const Router = useRouter();
    const store = useStore();
    const page = ref(1);
    const course = computed(() => store.state.clinic.course);
    const state = reactive({
      loading: false,
      finished: false
    });
    const change = () => {
      Router.go(-1);
    };
    const onLoad = () => {
      store
        .dispatch("getClinic", {
          count: 1,
          page: page.value
        })
        .then(len => {
          if (len === 0) {
            state.finished = true;
          } else {
            page.value += 1;
            state.loading = false;
          }
        });
    };
    return {
      change,
      state,
      onLoad,
      course,
      trainingCamp: computed(() => store.state.clinic.trainingCamp)
    };
  }
};
</script>

<style lang="scss" scoped>
main {
  padding: 0 10px;
}

.headerimg {
  width: 100%;
}
.van-icon {
  position: absolute;
  top: 20px;
  left: 10px;
}
nav {
  height: 30px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  div {
    background-color: #e7e7eb;
    border-radius: 10px;
    padding: 2px 10px;
  }
}
.van-list {
  // display: flex;
  // flex-direction: column;
  .content {
    display: flex;
    justify-content: center;
    align-items: centr;
    padding: 10px 0;
    border-bottom: 2px solid #f6f7f7;
    gap: 20px;
    .contentLeft {
      width: 150px;
      height: 80px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .contentRight {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      font-size: 12px;
      h5,
      p {
        margin: 0;
        text-align: left;
      }
      h5 {
        font-size: 16px;
        font-weight: 600;
      }
      .subtitle {
        color: #bfc8d1;
        margin-bottom: 15px;
      }
    }
  }
}
</style>
